<template>
    <div>
        <div id="apply">
            <div class="bg">
                <div class="nav">
                    <div class="logo">
                        <img class="logo-img" src="https://files.onestep6.com/cloud/cloud_icon.png" />
                        <div class="search" @click="onSearch">
                            <div class="search-content">
                                <van-icon name="search" color="#999999" size="15" />
                                <div class="search-txt">请输入搜索内容</div>
                                <div class="search-btn">搜索</div>
                            </div>
                        </div>
                    </div>
                    <div class="top-scroll">
                        <div class="scroll">
                            <div class="scroll-content">
                                <div :id="`type_${index}`" class="scroll-item"
                                    :class="{ 'scroll-c': type_index == index }" v-for="(item, index) in cate" :key="index"
                                    @click="onTab(item, index)">
                                    <img class="scroll-img" :src="item.icon" />
                                    <div class="scroll-txt">{{ item.name }}</div>
                                </div>
                                <div class="scroll-copy"></div>
                            </div>
                        </div>
                        <div class="scroll-menu" @click="onOpen()">
                            <div class="menu-txt">展开</div>
                            <img class="menu-img" src="https://files.onestep6.com/cloud/cart-menu.png" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="content">
                <van-tree-select height="calc(100vh - 92px - 104px - 5px" :items="cate[type_index].child" :main-active-index.sync="active" @click-nav="onClickNav">
                    <template #content>
                        <van-list v-if="isDataReady" v-model="loading" :finished="finished" :finished-text="`${good_list.length == 0 ? '暂无商品':'没有更多了'}`" @load="onLoad" :immediate-check="false">
                            <div class="dish-item" v-for="(itemC, indexC) in good_list" :key="indexC" @click="goDish(itemC)">
                                <div class="dish-tip" :class="{'tip-down': itemC.status == 0}">{{ `${itemC.status == 0 ? '下架中' : '上架中'}` }}</div>
                                <img class="dish-img" :src="itemC.pics"  />
                                <div class="dish-right">
                                    <div class="dish-txt">
                                        <span class="txt-icon">{{ itemC.unit }}</span>
                                        <span>{{ itemC.name }}</span>
                                    </div>
                                    <div class="dish-flex">
                                        <div class="dish-price">
                                            <span class="price-sym">¥</span>
                                            <span>{{ itemC.base_price_arr.z_price }}</span>
                                            <span class="price-icon">.{{ itemC.base_price_arr.x_price }}</span>
                                        </div>
                                        <div class="dish-icon" @click.stop="()=>{}">
                                            <!-- <img v-if="itemC.buy_car_good_count == 0" @click.stop="addCart(itemC, indexC)" class="icon-img" src="https://files.onestep6.com/cloud/cart-icon.png"  />
                                            <number-box v-if="itemC.buy_car_good_count > 0" v-model="itemC.buy_car_good_count" :good_id="itemC.id" :api="true" :is_cart="true" @numChange="numChange" /> -->
                                        </div> 
                                    </div>
                                    <div class="content-btns">
                                        <van-button v-if="itemC.status == 1" class="btn btn-c" @click.stop="onDownGood(itemC, indexC)">下架</van-button>
                                        <van-button v-if="itemC.status == 0" class="btn btn-c" @click.stop="onUpGood(itemC, indexC)">上架</van-button>
                                        <van-button class="btn" @click.stop="priceChange(itemC, indexC)">改价</van-button>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                        <!-- <div class="no-data" v-if="good_list.length == 0">
                            <img class="no-img" src="https://files.onestep6.com/cloud/cart-no.png"  />
                            <div class="no-txt">暂无订单～</div>
                        </div> -->
                    </template>
                </van-tree-select>
            </div>

        </div>


        <tabbar :is_menu="true" :placeholder="false" />

        <modal :show.sync="showModal" @close="handleClose">
            <div  class="top-content">
                <div class="scroll-content">
                    <div class="scroll-item" :class="{'scroll-c':type_index == index }" v-for="(item,index) in cate" :key="index" @click="onTab(item, index, true)">
                        <img class="scroll-img" :src="item.icon" />
                        <div class="scroll-txt">{{ item.name }}</div>
                    </div>
                </div>
                <div class="top-hide" @click="onClose()">
                    <div>点击收起</div>
                    <img class="hide-img" src="https://files.onestep6.com/cloud/menu-hide.png" />
                </div>
            </div>
        </modal>

        <popup-choose ref="popupChoose" txt="是否确认下架该商品，下架后，将不对平台商品进行展示" @right="onDownRight" />
        <popup-choose ref="popupUp" txt="是否确认上架该商品，上架后，商铺可正常查看与下单" @right="onUpRight" />

        <popup-price ref="popupPrice" @right="onPrice" />

    </div>
</template>
<script>
import { homeIndex, goodList, upGoods, changePrice } from "@/api/cloud";
import tabbar from '@/components/tabbar.vue';
import Modal from '@/components/ modal.vue';
import popupChoose from "@/components/popupChoose.vue";
import popupPrice from "@/components/popupPrice.vue";
export default {
    components: {
        tabbar,
        Modal,
        popupChoose,
        popupPrice
    },
    data() {
        return {
            type_index: 0,
            cate: [{child: []}],
            showModal: false,
            pages: 1,
            size: 10,
            list: [],
            loading: false,
            finished: false,
            menu_id: '',
            second_cate_id: '',
            active: 0,
            good_list: [],
            down_good_id: '',
            down_index: '',
            up_good_id: '',
            up_index: '',
            price_id: '',
			price_index: '',
            isDataReady: false
        }
    },
    mounted() {
        this.homeIndex()
    },
    methods: {
        // 获取一级分类
		async homeIndex() {
			const res = await homeIndex({});
			if(res.status == 1) {
                res.data.cate.map((item) => {
                    item.child.map((itemC) => {
                        itemC.text = itemC.name;
                    })
                })
				this.cate = res.data.cate;
                this.menu_id = res.data.cate[0].id;
                this.second_cate_id = res.data.cate[0].child[0].id;
                this.onLoad();
                console.log(this.cate)
                console.log(this.menu_id)
                console.log(this.second_cate_id)
			}
		},
        async onLoad () {
            this.goodList();
        },
        async goodList() {
            const res = await goodList({
                cate_id: this.menu_id,
                second_cate_id: this.second_cate_id,  // 分类都没有上传
                pages: this.pages,
                size: this.size
            })
            if (res.status == 1) {
                this.good_list = this.good_list.concat(res.data.list);
                this.loading = false;
                this.isDataReady = true;
                if (this.good_list.length >= res.data.count) {
                    this.finished = true;
                } else {
                    this.pages++;
                }
            } else {
                this.loading = false;
            }
        },
        onSearch() {
            this.$router.push('/search')
        },
        onOpen() {
            this.showModal = true;
		},
		onClose() {
			this.showModal = false;
		},
        handleClose() {
            console.log('弹窗已关闭')
        },
        onTab(item, index, bol = false) {
			console.log(this.list)
			if (index == this.type_index) {
				return false;
			}
			this.type_index = index;
            this.active = 0;
			this.menu_id = item.id;
			this.second_cate_id = item.child[0]?.id || '';
            // 弹出框点击分类选项
            if (bol) {
                this.showModal = false;
            }
            this.setNomal()
        },
        onClickNav(val) {
            console.log(val)
            console.log(this.cate)
            console.log(this.type_index)
            this.second_cate_id = this.cate[this.type_index].child[val].id;
            this.setNomal()
        },
        // 重置默认的分页
        setNomal() {
            this.loading = false;
            this.finished = false;
            this.pages = 1;
            this.good_list = [];
            this.isDataReady = false;
            this.onLoad();
        },
        goDish(item) {
            this.$router.push({
                path: '/goodDetail',
                query: {
                    id: item.id
                }
            })
        },
        onDownGood(item, index) {
            this.down_good_id = item.id;
            this.down_index = index;
            this.$refs.popupChoose.show();
        },
        // 确认下架商品
        async onDownRight() {
            const res = await upGoods({
                id: this.down_good_id,
                status: 0
            })
            if (res.status == 1) {
                this.$set(this.good_list[this.down_index], 'status', 0)
                this.$toast('下架成功')
            }
        },
        onUpGood(item, index) {
            this.up_good_id = item.id;
            this.up_index = index;
            this.$refs.popupUp.show();
        },
        async onUpRight() {
            const res = await upGoods({
                id: this.up_good_id,
                status: 1
            })
            if (res.status == 1) {
                this.$set(this.good_list[this.up_index], 'status', 1)
                this.$toast('上架成功')
            }
        },
        priceChange(item, index) {
            this.price_id = item.id;
            this.price_index = index;
            this.$refs.popupPrice.show({
                base_price:item.base_price, 
                price: item.price
            });
        },
        // 确认改价
        async onPrice(data) {
            console.log(data)
            const res = await changePrice({
                id: this.price_id,
                ...data
            })
            if (res.status == 1) {
                let arr = String(data.base_price).split('.');
                this.$set(this.good_list[this.price_index], 'base_price_arr', { z_price: arr[0], x_price: arr[1]})
                this.$toast.success('改价成功')
            }
        }
    }
}
</script>
<style lang="less" scoped>
div {
    box-sizing: border-box;
}

#apply {
    display: flex;
    flex-direction: column;
    width: 100vw;
    min-height: 100vh;
    padding-top: 92px;
    padding-bottom: 104px;
    background: #FFFFFF;

    ::v-deep .van-nav-bar .van-icon {
        color: #323233;
    }

    ::v-deep .van-notice-bar {
        z-index: 6;
    }

    ::v-deep .van-hairline--bottom::after {
        border: none;
    }
}

.nav-img {
    display: block;
    width: 139px;
    height: 34px;
}

.bg {
    width: 750px;
    height: 190px;
    overflow: hidden;
    background: linear-gradient(96deg, #EAFAED 0%, #DCFADE 100%);

    .nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1001;
        width: 100%;
        height: 92px;
        background: linear-gradient(96deg, #EAFAED 0%, #DCFADE 100%);
        // background: linear-gradient( 135deg, #C9FFD9 0%, #F4F4F4 100%);
    }

    .navBar {
        display: flex;
        height: 88px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .nav-left {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        margin-right: 20px;
    }

    .logo {
        position: relative;
        z-index: 200;
        display: flex;
        align-items: center;
        // width: 72%;
        height: 88px;
        padding-left: 30px;

        .logo-img {
            flex-shrink: 0;
            display: block;
            width: 139px;
            height: 34px;
            margin-right: 8px;
        }

        .logo-txt {
            padding-top: 10px;
            font-size: 24px;
            line-height: 56px;
            color: #798391;
            font-weight: 400;
        }
    }

    .search {
        display: flex;
        width: 496px;
        height: 65px;
        // padding: 12px 32px;
        margin-left: 22px;
    }

    .search-content {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #FFFFFF;
        border-radius: 64px;
        padding-left: 24px;
        border: 2px solid #49CA6F;
    }

    .search-txt {
        font-size: 24px;
        font-weight: 400;
        color: #798391;
        margin-left: 2px;
    }

    .search-btn {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 111px;
        height: 56px;
        border-radius: 64px;
        background: #49CA6F;
        font-size: 29px;
        line-height: 56px;
        color: #FFFFFF;
        text-align: center;
    }
}

.scroll {
    width: 100%;
    height: 160px;

    .scroll-content {
        display: flex;
        align-items: center;
        padding-top: 24px;
        padding-bottom: 24px;
        padding-left: 36px;
        overflow-x: scroll;
        scrollbar-width: none; /* Firefox 隐藏滚动条 */
        -ms-overflow-style: none; /* IE 10+ 隐藏滚动条 */
    }
    .scroll-content::-webkit-scrollbar {
        display: none; /* Chrome、Safari、Edge 隐藏滚动条 */
    }
}

.scroll-item {
    flex-shrink: 0;
    width: fit-content;
    margin-right: 24px;

    .scroll-img {
        display: block;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0 auto 12px;
    }

    .scroll-txt {
        font-size: 24px;
        line-height: 36px;
        font-weight: bold;
        padding: 0 6px;
        white-space: nowrap;
        text-align: center;
    }
}

.scroll-c {
    .scroll-img {
        width: 72px;
        height: 72px;
        border: 4px solid #49CA6F;
    }

    .scroll-txt {
        background: #49CA6F;
        border-radius: 28px;
        color: #FFFFFF;
    }
}

.scroll-copy {
    flex-shrink: 0;
    width: 108px;
    height: 108px;
}

.top-scroll {
    position: relative;
}

.scroll-menu {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 58px;
    height: 170px;
    padding-top: 32px;
    padding-left: 18px;
    padding-right: 4px;
    background: #DCFADE;

    .menu-txt {
        font-size: 24px;
        line-height: 32px;
        font-weight: 400;
        margin-bottom: 10px;
        text-align: center;
    }

    .menu-img {
        display: block;
        width: 32px;
        height: 32px;
    }
}

.top-popup {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    padding: 12px 36px 0;
    background: #FFFFFF;
    border-radius: 0 0 20px 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 3s ease, visibility 3s ease;
}

.top-popup.active {
    opacity: 1;
    visibility: visible;
}

.top-content {

    // transform: translateY(420px);
    // transition: transform 3s ease;
    .scroll-content {
        display: flex;
        flex-wrap: wrap;
        padding: 12px 42px 0px 42px;
    }

    .scroll-item {
        width: 20%;
        margin-right: 0;
        margin-bottom: 28px;
    }

    .top-hide {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 80px;
        font-size: 20px;
        line-height: 78px;
        font-weight: 400;
        color: #798391;
        border-top: 2px solid #F5F5F6;

        .hide-img {
            flex-shrink: 0;
            display: block;
            width: 24px;
            height: 24px;
            margin-left: 10px;
            transform: rotate(180deg);
        }
    }
}

.top-popup.active .top-content {
    transform: translateY(0);
}

.mask {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
}


.new-pop {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    padding: 12px 36px 0;
    background: #FFFFFF;
    border-radius: 0 0 20px 20px;
    transform: translateY(-100%);
    opacity: 0;
    // visibility: hidden;
    // transition: opacity 3s ease, visibility 3s ease;
}

.top-content{
	.scroll-content{
		display: flex;
		flex-wrap: wrap;
	}
	.scroll-item{
		width: 20%;
		margin-right: 0;
		margin-bottom: 32px;
	}
	.top-hide{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 80px;
		font-size: 20px;
		line-height: 78px;
		font-weight: 400;
		color: #798391;
		border-top: 2px solid #F5F5F6;
		.hide-img{
			flex-shrink: 0;
			display: block;
			width: 24px;
			height: 24px;
			margin-left: 10px;
			transform: rotate(180deg);
		}
	}
}

.content{
    flex: 1;
    display: flex;
    ::v-deep .van-tree-select{
        flex: 1
    }
    ::v-deep .van-sidebar{
        width: 24px !important;
        min-width: 24px;
    }
    ::v-deep .van-tree-select__nav{
        width: 24px !important;
        min-width: 24px;
    }
    ::v-deep .van-tree-select__content{
        flex: 0 0 574px;
        padding-top: 20px;
    }
    ::v-deep .van-tree-select__nav-item{
        padding: 24px 10px 16px 10px;
        text-align: center;
    }
    .van-sidebar-item--select::before{
        background-color: #49CA6F;
    }
    .dish-item{
        position: relative;
		// width: 340px;
		display: flex;
		width: 100%;
		padding-left: 22px;
		padding-right: 34px;
		background: #FFFFFF;
		margin-bottom: 18px;
        border-radius: 16px;
	}
    .dish-tip{
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 10px;
        width: fit-content;
        height: 28px;
        font-size: 20px;
        line-height: 28px;
        color: #FFFFFF;
        background: #49CA6F;
        border-radius: 10px 0px 10px 0px;
    }
    .tip-down{
        background: #798391;
    }
	.dish-right{
		width: 332px;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20px;
		border-bottom: 2px solid #F5F5F6;
		padding-bottom: 34px;
	}
	.dish-img{
		flex-shrink: 0;
		display: block;
		width: 158px;
		height: 158px;
		border-radius: 16px;
	}
	.dish-txt{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 80px;
		font-size: 28px;
		line-height: 40px;
		color: #000000;
		font-weight: bold;
		.txt-icon{
			width: fit-content;
			padding: 0 6px;
			margin-right: 6px;
			font-size: 22px;
			line-height: 40px;
			margin-bottom: 2px;
			color: #FFFFFF;
			background: #49CA6F;
			border-radius: 4px;
		}
	}
	.dish-flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.dish-price{
			font-size: 32px;
			line-height: 40px;
			color: #FF4D4F;
			font-weight: bold;
			.price-sym{
				font-size: 24px;
			}
			.price-icon{
				font-size: 20px;
			}
		}
		.dish-icon{
			position: relative;
			.icon-img{
				display: block;
				width: 48px;
				height: 48px;
			}
		}
	}
    .content-btns{
        display: flex;
        justify-content: flex-end;
        padding-top: 30px;
        .btn{
            width: 128px;
            height: 56px;
            padding: 0;
            background: #49CA6F;
            border-radius: 39px;
            font-size: 24px;
            line-height: 24px;
            font-weight: 400;
            color: #FFFFFF;
            margin: 0;
            
        }
        .btn-c{
            background: #FFFFFF;
            border: 2px solid #49CA6F;
            color: #49CA6F;
            margin-right: 16px;
        }
    }
}

.no-data{
	padding-top: 82px;
	.no-img{
		display: block;
		width: 222px;
		height: 222px;
		margin: 0 auto 20px;
	}
	.no-txt{
		font-size: 28px;
		line-height: 44px;
		color: #798391;
		text-align: center;
	}
}
</style>